<template>
  <!-- 巡查管理 -->
  <div class="wrapper">
    <!-- @exportXls="exportXls" @handleEnSure="handleEnSure" @handleAdd="handleAdd" -->
    <search-form :area="area" :display="'representative'" @search="search"> </search-form>
    <a-card :body-style="{ padding: 0 }" :bordered="false">
      <a-spin :indicator="indicator" :spinning="spinning" tip="获取数据中...">
        <div class="spin-content">
          <a-table size="small" bordered :rowKey="record => record.id" :columns="columns" :dataSource="data"
            :pagination="pagination" :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
            :rowClassName="setRowClassName">
            <span slot="type" slot-scope="text, record">
              <a-badge v-if="record.handlingTime != null && record.handlingTime != ''" :color="'green'" :text="'已处置'" />
              <a-badge v-else :color="'red'" :text="'未处置'" />
            </span>
            <span slot="action" slot-scope="text, record">
              <template>
                <a size="small" type="link" @click="handleView(record)">详情</a>
              </template>
            </span>
          </a-table>
        </div>
      </a-spin>
    </a-card>
    <info-modal :actionType="action" ref="infomodal"></info-modal>
  </div>
</template>

<script>
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { getProblemHandlingList, getListByProjectID } from '@/api/project'
import SearchForm from './modules/searchform'
import InfoModal from './modules/infomodal'
import { mapActions, mapGetters } from 'vuex'
import { tranDate } from '@/utils/util'

const userInfo = Vue.ls.get(ACCESS_TOKEN) // DepartmentID
let columnsData = [{
  title: '工程名称',
  dataIndex: 'ProjectName',
  key: 'ProjectName',
  align: 'center'
},
{
  title: '状态',
  dataIndex: 'type',
  key: 'type',
  align: 'center',
  scopedSlots: { customRender: 'type' },
},
{
  title: '上报人',
  dataIndex: 'AddUserName',
  key: 'AddUserName',
  align: 'center'
},

{
  title: '问题描述',
  dataIndex: 'problemContext',
  key: 'problemContext',
  align: 'center'
},

{
  title: '时间',
  dataIndex: 'addTime',
  key: 'addTime',
  align: 'center'
},
{
  title: '处置描述',
  dataIndex: 'handlingContext',
  key: 'handlingContext',
  align: 'center'
},
{
  title: '处置时间',
  dataIndex: 'handlingTime',
  key: 'handlingTime',
  align: 'center'
},]
export default {
  components: { SearchForm, InfoModal },
  props: {
    display: {
      type: String,
      required: false,
      default: 'default'
    }
  },
  created() {
    console.log('created')
    const projectID = this.$route.query.projectID
    this.queryParam.departmentID = userInfo.DepartmentID
    if (projectID) {
      this.handleViewProblem({ id: projectID })
      this.area = 'projectID'
      console.log('有参数')
    } else {
      this.initData(this.queryParam)
      this.area = 'basic'
      console.log('没参数')
    }
  },
  mounted() {
    console.log('mounted')
  },
  destroyed() {
    console.log('销毁')
  },
  data() {
    return {
      area: 'basic',
      columnsData,
      action: 'add',
      indicator: <a-icon type="loading" style="font-size: 24px" spin />,
      spinning: false,
      data: [],
      form: this.$form.createForm(this),
      queryParam: {
        index: 1,
        pageSize: 10,
        isZJ: true
      },
      selectedRowKeys: [],
      pagination: {
        onChange: (index, pageSize) => {
          this.pageOnChange(index, pageSize)
        },
        current: 1,
        total: 0,
        showQuickJumper: true,
        size: 'small',
        defaultPageSize: 10,
        showTotal: total => `共 ${total} 条数据`,
        showSizeChanger: true,
        pageSizeOptions: ['5', '10', '15', '20'],
        onShowSizeChange: (index, pageSize) => {
          this.pageOnChange(index, pageSize)
        },
        position: 'bottom'
      }
    }
  },
  watch: {
    $route() {
      console.log('watch')
      const projectID = this.$route.query.projectID
      this.queryParam.departmentID = userInfo.DepartmentID
      if (projectID) {
        this.handleViewProblem({ id: projectID })
        this.area = 'projectID'
        console.log('有参数')
      } else {
        this.initData(this.queryParam)
        this.area = 'basic'
        console.log('没参数')
      }
    }
  },
  computed: {
    ...mapGetters(['token']),
    columns() {
      this.display === 'choose'
        ? (this.columnsData = this.columnsData.filter(a => a.title != '操作'))
        : this.columnsData.push({
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          width: 130,
          align: 'center'
        })
      return this.columnsData
    }
  },
  methods: {
    initData(data) {
      this.spinning = true
      getProblemHandlingList(data)
        .then(res => {
          this.data = res.data
          this.data.map(a => {
            a.addTime = tranDate(a.addTime)
            a.handlingTime = tranDate(a.handlingTime)
          })
          this.pagination.total = res.page.RecordCount
        })
        .finally(() => {
          this.spinning = false
        })
    },
    search(data) {
      Object.assign(this.queryParam, data, { index: 1 })
      this.pagination.current = 1
      this.initData(this.queryParam)
    },

    /**
     * 查看详情
     * @param {*} data 
     */
    handleView(data) {
      this.action = 'view'
      this.$refs.infomodal.view(data)
    },
    /**
     * 有参数时查询问题列表
     * @param {*} data 
     */
    handleViewProblem(data) {
      this.spinning = true
      getListByProjectID({ projectID: data.id })
        .then(res => {
          this.data = res.data
          this.data.map(a => {
            a.addTime = tranDate(a.addTime)
            a.handlingTime = tranDate(a.handlingTime)
          })
          this.pagination.total = res.page.RecordCount
        })
        .finally(() => {
          this.spinning = false
        })
    },
    handleExport(data) {
      this.spinning = true
      exportStudentInfo({ studentId: data.id })
        .then(res => {
          const a = `${process.env.VUE_APP_API_BASE_URL}${res.data}`
          window.open(a)
        })
        .finally(() => {
          this.spinning = false
        })
    },
    tranChooseData(data) {
      this.selectedRowKeys = data
    },
    handleEnSure() {
      this.$emit('choosed', this.data.filter(a => this.selectedRowKeys.indexOf(a.ID) > -1))
    },
    setRowClassName(record, idx) {
      return idx % 2 == 1 ? 'bg-zebra-pattern' : ''
    },
    onSelectChange(selectedRowKeys) {
      // console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },
    pageOnChange(index, pageSize) {
      this.spinning = true
      Object.assign(this.pagination, {
        current: index,
        pageSize,
        index
      })
      Object.assign(this.queryParam, {
        pageSize,
        index
      })
      this.initData(this.queryParam)
    }
  },
}
</script>
<style lang="less" scoped>

</style>
